<template>
<!-- 三级导航 -->
<el-card>
<el-form :inline="true" class="demo-form-inline" >

 <el-form-item label="一级分类">
    <el-select v-model="getCategory1Id" placeholder="请选择" @change="getList2(getCategory1Id) " :disabled="flag">
      <el-option v-for="c1 in getCategoryList1"  :key="c1.id" :label="c1.name" :value="c1.id"></el-option>
    </el-select>
  </el-form-item>

 <el-form-item label="二级分类">
    <el-select v-model="getCategory2Id" placeholder="请选择" @change="getList3(getCategory2Id)" >
      <el-option v-for="c2 in getCategoryList2" :key="c2.id" :label="c2.name" :value="c2.id"></el-option>
    </el-select>
  </el-form-item>

 <el-form-item label="三级分类">
    <el-select v-model="getCategory3Id" placeholder="请选择" >
      <el-option v-for="c3 in getCategoryList3" :key="c3.id" :label="c3.name" :value="c3.id"   ></el-option>
    </el-select>
  </el-form-item>

</el-form>
</el-card>
</template>

<script>
import { mapActions, mapState } from 'vuex';

export default{

    data() {
        return {
        getCategory1Id:'',
        getCategory2Id:'',
        getCategory3Id:'',
        flag:false
        }
    },
    computed:{
      ...mapState('categry',['getCategoryList1','getCategoryList2','getCategoryList3']),
   
    },
    methods:{
         ...mapActions('categry',['getList1','getList2','getList3'])
    },

   mounted() {
    this.getList1()
   },


}

</script>

<style scoped>


</style>